<template>
  <div class="framework1">
    <div class="framework2">
    <div class="top-class-table">
      <div class="header">
        <div style="margin-left: 10px;font-weight: bold;">应用维护->模板管理</div>
      </div>

      <div style="display: flex;">
        <!--      左侧树-->
        <div style="width: 200px;height: 100%">
          <ul style="padding-top: 0">
            <li v-for="item in treeData" :key="item.id" :class="{ 'selected': item.selected }">
              <div @click="toggleNode(item)">
            <span v-if="item.expanded">
              <img src="../../assets/FolderOpen.png" style="width: 20px; height: 20px;">
            </span>
                <span v-else>
              <img src="../../assets/Folder.png" style="width: 20px; height: 20px;">
            </span>
                {{ item.label }}
              </div>
              <ul v-if="item.children && item.expanded">
                <li v-for="child in item.children" :key="child.id" :class="{ 'selected': child.selected }">
                  <div @click="selectNode(child)">
                    <img src="../../assets/Document.png" style="width: 20px; height: 20px;">
                    {{ child.label }}
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div style="background-color: #D3D3D3;width: 1px">
        </div>
        <!--       右侧表-->
          <div class="tablesContent" style="width: calc(100% - 200px);height: calc(100vh - 120px)">
            <!--      表格-->
              <el-table class="table"  :data="tableData"
                        :row-style="{height: '47px'}"
                        style="width: 100%;height:calc(100% - 42px)"
                        show-empty empty-text="暂无数据"
                        :header-cell-style="{background:'#f4f3f9'}">
                <el-table-column prop="documentId" label="模板编号" width="100"/>
                <el-table-column prop="documentName" label="模板名称" width="280"/>
                <el-table-column prop="updateTime" label="更新时间" width="230"/>
                <el-table-column prop="templateDesc" label="模板说明" width="auto"/>
                <el-table-column prop="isDelete" label="是否可用" width="105">
                  <template #default="scope">
                    <el-tag
                        :type="scope.row.isDelete === '0' ? 'success' : 'danger'"
                        disable-transitions> {{ Number(scope.row.isDelete) == '0' ? '可用' : '停用' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                  <template #default="scope">
                    <el-button type="success" icon="DocumentCopy" size="small"
                               @click="handleGenerate(scope.row.documentName)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="footer">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[5, 10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
              </div>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!--  对话框-->
  <!--  增加按钮对话框-->
  <!--  <el-dialog v-model="disvisable"-->
  <!--             title="增加模板"-->
  <!--             width="30%"-->
  <!--             :before-close="handleClose1"-->
  <!--             align-center>-->
  <!--    <el-form :model="tableData1" :rules="rules" ref="tableData" label-width="100px" class="demo-ruleForm">-->
  <!--      <el-form-item label="模板编号" prop="documentId" style="width: 113%">-->
  <!--        <el-input v-model=" tableData1.documentId" placeholder="唯一编号"-->
  <!--                  style="width: 70%"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="模板名称" prop="documentName" style="width: 113%">-->
  <!--        <el-input prop="documentName" v-model="tableData1.documentName" placeholder="模板名称"-->
  <!--                  style="width: 70%"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="模板说明" style="width: 113%">-->
  <!--        <el-input v-model="tableData1.templateFile" placeholder="模板说明"-->
  <!--                  style="width: 70%"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="模板文件">-->
  <!--        <el-upload-->
  <!--            style="height: 32px;"-->
  <!--            class="upload-demo"-->
  <!--            action="/upload"-->
  <!--            :on-success="handleSuccess"-->
  <!--            :before-upload="beforeUpload"-->
  <!--        >&nbsp;-->
  <!--          <el-button size="medium">选择文书模板文件</el-button>-->
  <!--        </el-upload>-->
  <!--        <el-input v-model="tableData1.file" style="height:32px;width: 36%"></el-input>-->
  <!--      </el-form-item>-->

  <!--      <el-form-item label="更新时间" style="width: 113%">-->
  <!--        <el-date-picker v-model="tableData1.updateTime"-->
  <!--                        value-format="YYYY 年 MM 月 DD 日 HH 时 mm 分" type="datetime"-->
  <!--                        placeholder="请选择时间日期" style="width: 60%"/>-->
  <!--      </el-form-item>-->

  <!--      <el-form-item label="是否可用" style="width: 113%">-->
  <!--        <el-select v-model="selectedOption" placeholder="请选择">-->
  <!--          <el-option-->
  <!--              v-for="item in options"-->
  <!--              :key="item.value"-->
  <!--              :label="item.label"-->
  <!--              :value="item.value"-->
  <!--          />-->
  <!--        </el-select>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--    <template #footer>-->
  <!--      <span class="dialog-footer">-->
  <!--        <el-button @click="cancel">取消</el-button>-->
  <!--        <el-button type="primary" @click="submitForm('tableData')">-->
  <!--          保存-->
  <!--        </el-button>-->
  <!--      </span>-->
  <!--    </template>-->
  <!--  </el-dialog>-->

  <!--  &lt;!&ndash;  详情按钮对话框&ndash;&gt;-->
  <!--  <el-dialog v-model="disvisable2"-->
  <!--             title="详情"-->
  <!--             width="30%"-->
  <!--             align-center>-->
  <!--    <div v-if="selectedRow">-->
  <!--      <p>模板编号: {{ selectedRow.documentId }}</p>-->
  <!--      <p>模板名称: {{ selectedRow.documentName }}</p>-->
  <!--      <p>模板说明: {{ selectedRow.shuoming }}</p>-->
  <!--      <p>模板文件: {{ selectedRow.file }}</p>-->
  <!--      <p>更新时间: {{ selectedRow.date }}</p>-->
  <!--      <p>是否可用: {{ selectedRow.judge }}</p>-->
  <!--    </div>-->

  <!--  </el-dialog>-->
</template>

<script>
import {reactive, ref} from 'vue'
import request from "@/utils/request";
import axios from "axios";

export default {
  name: "Template",
  data() {
    return {
      // 分页数据
      currentPage: 1, //页码
      pageSize: 10, //页长
      total: 0,  //总表长
      rowId: 0,
      arr: '',

      documentType: '',
      pstageId: '',
      judge: '',
      disvisable: false,
      disvisable1: false,
      disvisable2: false,
      selectedRow: null,

      treeData: [],
      options: [
        {
          value: '0',
          label: '可用'
        },
        {
          value: '1',
          label: '停用'
        }
      ],
      selectedOption: '',
      tableData: [],

      tableData1: {
        id: '',
        documentId: '',
        documentName: '',
        templateDesc: '',
        updateTime: '',
        isDelete: '',
        templateFile: '',
      },

      rules: {
        documentId: [
          {required: true, message: '请输入模板编号', trigger: 'blur'},
        ],
        documentName: [
          {required: true, message: '请输入模板名称', trigger: 'blur'},
        ]
      },
    };
  },

  computed: {
    canSubmit() {
      const {documentId, documentName} = this.tableData
      return Boolean(documentId && documentName)
    }
  },

  created() {
    console.log("初始化加载方法");
    // this.reqTemData(); //加载地点数据
    this.fetchData();
  },

  methods: {

    fetchData() {
      request.get('/archive/stageName').then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            this.treeData.push({
              id: key,
              label: res.data[key],
              expanded: false,
              selected: false,
              children: [
                {
                  id: 0,
                  selected: false,
                  label: '内部'
                },
                {
                  id: 1,
                  selected: false,
                  label: '外部'
                }
              ]
            })
          }
        }
      })
          .catch(error => {
            console.error(error);
          });
    },

    toggleNode(node) {
      this.pstageId = node.id;
      node.expanded = !node.expanded;
      this.treeData.forEach(item => {
        if (item !== node) {
          item.expanded = false;
        }
      });
      if (!node.expanded) {
        this.closeAllChildNodes(node);
      }
    },

    selectNode(node) {
      this.documentType = node.id;
      this.treeData.forEach(item => {
        item.selected = false;
        item.children.forEach(son => {
          son.selected = false;
        })
      });
      node.selected = !node.selected;
      this.reqTemData();
    },


    closeAllChildNodes(node) {
      if (node.children) {
        node.children.forEach(child => {
          child.expanded = false;
          this.closeAllChildNodes(child);
        });
      }
    },

    // submitForm(tableData1) {
    //   this.$refs[tableData1].validate((valid) => {
    //     if (valid) {
    //       // 发送请求
    //       // name , pid =0,miaosu,一级分类
    //       this.disvisable = false
    //       this.tableData1.isDelete = this.selectedOption.label
    //       debugger;
    //       request.post("/archive/edit", this.tableData1).then(res => {
    //         if (res.code == '200') {
    //           this.$message({
    //             type: "success",
    //             message: "提交成功"
    //           })
    //           this.reqTemData();
    //         }
    //       })
    //       this.handleClose1();
    //     } else {
    //       this.disvisable = true
    //     }
    //   });
    // },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.reqTemData();
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.reqTemData();
    },

    // deleteTem(val) {
    //   this.$confirm('是否确定删除地点?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     showClose: false,
    //     type: 'warning'
    //   }).then(() => {
    //     debugger;
    //     request.get("/archive/delete/" + val).then(res => {
    //       if (res.code == "200") {
    //         this.$message({
    //           type: "success",
    //           message: "删除成功"
    //         })
    //         this.selectNode();
    //       }
    //     })
    //   })
    // },

    cancel() {
      this.disvisable = false;
      this.handleClose1();
    },

    handleClose1() {
      console.log(this.$refs.tableData)
      this.$refs.tableData.resetFields()
      // this.tableData.placeDesc = ''
      this.disvisable = false
    },

    // showDetails(row) {
    //   // 处理详情按钮点击事件
    //   this.disvisable2 = true;
    //   this.selectedRow = row;
    // },

    handleSuccess(response, file, fileList) {
      // 上传成功的处理逻辑
      console.log(response);
    },

    // beforeUpload(file) {
    //   // 文件选择前的处理逻辑
    //   this.input3 = file.name; // 将文件名称赋值给input3
    //   return true; // 返回true表示继续上传
    // },

    // 分页请求
    reqTemData() {
      request.get("/archive/documentlist?documentType=" + this.documentType
          + "&pstageId=" + this.pstageId + "&page=" + this.currentPage + "&pageSize=" + this.pageSize).then(res => {
        if (res.code === '200') {
          for (let key in res.data) {
            if (key == "records") {
              this.tableData = res.data[key];
            }
            if (key == "total") {
              this.total = res.data[key];
            }
          }
        }
      })
    },

     handleGenerate(documentName) {
      // 拼接PDF文件的路径
      let pdfPath = "/static/PDF/" + documentName + ".pdf";
      // 在新窗口中打开PDF文件
      window.open(pdfPath, "_blank");

      // 发送跨域请求
      /*const url= 'D:/Myproject/city-manage-vue/src/PDF/';
      axios.get('/api/file/download/'+ url + documentName +'.pdf', {
        responseType: 'arraybuffer'  // Important to handle binary data
      })
          .then(res => {
            // 获取响应的blob数据
            const blob = new Blob([res.data], {type: 'application/pdf'});

            // 创建一个URL，用于在新窗口中打开PDF预览
            const pdfURL = window.URL.createObjectURL(blob);

            // 创建一个新窗口打开PDF预览
            window.open(pdfURL, '_blank');
          })
          .catch(err => {
            // 处理错误
            console.error(err);
          });*/
    }
  }
}
</script>

<style scoped>
.selected {
  background-color: #71c7f3;
}

table {
  border-collapse: collapse;
}

tr {
  border-collapse: collapse;
}

th {
  line-height: 33px;
}

input {
  border: 0 solid black;
  line-height: 25px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/*   表格大标题   */
.header {
  font-size: 16px;
  font-weight: bold;
  padding: 4px 20px;
  background-color: #D3D3D3;
}

::v-deep .element.style {
  display: none;
}

.table > tr {
  display: none;
}

/*   外框架   */
.framework1 {
  height: calc(100vh - 88px);
  width: calc(100vh - 200px);
  margin-left: 8px;
  border: solid 1px #D3D3D3;
}

/*   内框架   */
.framework2 {
  height: calc(100vh - 92px);
  border: solid 1px #D3D3D3;
}

/*   表格大标题   */
.header {
  font-size: 16px;
  font-weight: bold;
  padding: 4px 20px;
  height: 22px;
  background-color: #CCCCCC;
}

/*   表格分页处   */
.footer {
  padding: 4px 10px;
  background-color: #f4f3f9;
}

</style>
